<template>
  <layout :showBg="false">
    <template #header>
      <pageHead title="提现" />
    </template>
    <view class="content">
      <view class="type">
        <view v-if="selectedAccount.id">
          <view class="c-90 fs-32"
            >转到{{
              selectedAccount.accountType == 1 ? "支付宝" : "银行卡"
            }}</view
          >
          <view @click="onShowFilter" class="choose flex flex-a flex-bt">
            <view class="flex flex-a">
              <image
                :src="
                  require(`../../../assets/images/wallet/${
                    selectedAccount.accountType == 1 ? 'ali' : 'union'
                  }.png`)
                "
                :style="{
                  width: selectedAccount.accountType == 1 ? '44rpx' : '64rpx',
                  height: selectedAccount.accountType == 1 ? '44rpx' : '48rpx',
                  marginRight: '16rpx',
                }"
              ></image>
              <view>
                <view class="fs-32 c-90"
                  >{{
                    selectedAccount.accountType == 1
                      ? "支付宝"
                      : selectedAccount.bankName
                  }}（{{ hideNum(selectedAccount.accountNumber) }}）</view
                >
                <view class="fs-28 c-60">立即到账</view>
              </view>
            </view>
            <image
              class="right"
              src="../../../assets/images/icons/arrow-right.png"
            ></image>
          </view>
        </view>
        <view class="input-box">
          <view class="fs-32 c-90">提现金额</view>
          <view class="ipt flex flex-a">
            <text class="unit">￥</text>
            <u--input
              class="input bold"
              v-model="amount"
              type="digit"
              placeholder=""
              clearable
              @change="onChange"
              :key="iptKey"
            />
            <!-- <image
              @click="amount = null"
              v-if="amount"
              class="clear"
              src="../../../assets/images/icons/close-circle.png"
            ></image> -->
          </view>
          <view class="remain flex flex-bt fs-28">
            <view>
              <text class="c-60">可提现金额</text>
              <text class="money deep-dark">￥{{ balance }}</text>
            </view>
            <text @click="amount = balance" class="active-text">全部</text>
          </view>
        </view>
        <view class="active-btn" @click="onDraw">提现</view>
      </view>
      <u-popup :round="'32rpx'" :show="showFilter" @close="close" @open="open">
        <view class="filter-content">
          <view class="title">
            <text class="fs-36 bold black">选择提现银行卡</text>
            <u-icon class="close" name="close" @click="close"></u-icon>
          </view>
          <view class="list">
            <view
              class="f-item flex flex-bt flex-a"
              v-for="(filter, index) in filters"
              :key="index"
              @click="onChoose(filter)"
            >
              <view class="flex flex-a f1 no-shrink">
                <view class="bank-name flex flex-a-c">
                  <image
                    class="icon"
                    :src="
                      require(`../../../assets/images/wallet/${
                        filter.accountType == 1 ? 'ali' : 'union'
                      }.png`)
                    "
                    :style="{
                      width: filter.accountType == 1 ? '44rpx' : '64rpx',
                      height: filter.accountType == 1 ? '44rpx' : '48rpx',
                    }"
                  ></image>
                </view>
                <view>
                  <view class="c-90 fs-32 name"
                    >{{
                      filter.accountType == 0 ? filter.bankName : "支付宝"
                    }}({{ hideNum(filter.accountNumber) }})</view
                  >
                  <view class="c-60 fs-28 type">立即到账</view>
                </view>
              </view>
              <image
                class="radio"
                src="../../../assets/images/common/radio-checked.png"
                v-if="filter.id == selectedId"
              />
              <image
                class="radio"
                src="../../../assets/images/common/radio.png"
                v-else
              />
            </view>
            <view @click="toAddBank" class="f-item flex flex-bt flex-a">
              <view class="flex flex-a">
                <image
                  class="icon"
                  src="../../../assets/images/wallet/add.png"
                ></image>
                <view>
                  <view class="c-90 fs-32 name">添加银行卡</view>
                </view>
              </view>
              <image
                class="arrow"
                src="../../../assets/images/icons/arrow-right.png"
              />
            </view>
          </view>
          <view class="btns flex">
            <text @click="onConfirm" class="btn active-btn">确定</text>
          </view>
        </view>
      </u-popup>
    </view>
  </layout>
</template>
<script>
import layout from "../../../compennts/layout/index.vue";
import pageHead from "../../../compennts/pageHead/index.vue";
import { getAccountList } from "../../../api/setting/index";
import { getLocalUserInfo } from "../../../assets/utils/index";
import { withdraw } from "../../../api/drawCash/index";
import { getUserInfo } from "../../../api/auth";

export default {
  components: {
    layout,
    pageHead,
  },
  data() {
    return {
      userinfo: null,
      asset: {},
      amount: null,
      showFilter: false,
      selectedId: -1,
      selectedAccount: {},
      filters: [],
      balance: 0,
      iptKey: 0,
    };
  },
  create() {},
  onShow() {
    this.getBalance();
    uni.showLoading({
      mask: true,
    });
    getAccountList()
      .then((res) => {
        this.filters = res.data;
        if (this.filters.length) {
          this.selectedId = res.data[0].id;
          this.selectedAccount = res.data[0];
        }
      })
      .finally(() => {
        uni.hideLoading();
      });
  },
  methods: {
    getBalance() {
      let token = uni.getStorageSync("token");
      if (!token) return (this.userinfo = {});
      this.userinfo = getLocalUserInfo();
      this.asset = this.userinfo.asset || {};
      getUserInfo().then((res) => {
        console.log(res);
        uni.setStorageSync("userInfo", JSON.stringify(res.data));
        this.userinfo = res.data;
        this.asset = res.data.asset;
        this.balance = this.asset.balance || 0;
      });
    },
    onChange(e) {
      console.log(e, this.balance, e > this.balance);
      if (e > this.balance) {
        this.amount = this.balance;
        this.iptKey++;
      } else {
        this.amount = e;
      }
    },
    hideNum(num) {
      return "********" + num.substring(num.length - 4);
    },
    onShowFilter() {
      this.showFilter = true;
      this.selectedId = this.selectedAccount.id;
    },
    close() {
      this.showFilter = false;
    },
    open() {},
    onConfirm() {
      this.filters.map((item) => {
        if (item.id == this.selectedId) {
          this.showFilter = false;
          this.selectedAccount = item;
          return;
        }
      });
    },
    onDraw() {
      console.log(this.amount);
      console.log(this.selectedAccount);
      if (!this.amount) {
        return uni.showToast({
          title: "请输入提现金额",
          icon: "none",
          duration: 2000,
        });
      }
      uni.showLoading({
        mask: true,
      });
      withdraw({
        accountId: this.selectedAccount.id,
        money: this.amount,
        payRemark: "",
      })
        .then((res) => {
          console.log(res);
          uni.navigateTo({
            url: "/pages/mine/wallet/drawSuccess?type=1",
          });
        })
        .finally(() => {
          uni.hideLoading();
        });
    },
    onChoose(item) {
      console.log(item);
      this.selectedId = item.id;
    },
    toAddBank() {
      this.close();
      uni.navigateTo({
        url: "/pages/mine/wallet/addAccount",
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../../assets/styles/common.less");
.content {
  background: #f7f8ff;
  height: 100%;
  padding: 32rpx;
  .choose {
    margin-top: 16rpx;
    .icon {
      width: 56rpx;
      height: 56rpx;
      flex-shrink: 0;
      margin-right: 16rpx;
      border-radius: 50%;
    }
    .right {
      width: 32rpx;
      height: 32rpx;
    }
  }
  .input-box {
    padding: 32rpx;
    border-radius: 16rpx;
    background: #ffffff;
    margin-top: 32rpx;
    position: relative;
    .ipt {
      border-bottom: 2rpx solid #e9e9ea;
      padding: 16rpx 0;
    }
    .unit {
      font-size: 52rpx;
    }
    .input {
      font-size: 64rpx;
      padding-left: 4rpx;
    }
    .remain {
      margin-top: 16rpx;
      .money {
        margin-left: 8rpx;
      }
    }
    .clear {
      position: absolute;
      right: 32rpx;
      width: 48rpx;
      height: 48rpx;
    }
  }
  .active-btn {
    height: 88rpx;
    margin-top: 200rpx;
  }
}
.filter-content {
  padding: 48rpx 0;
  box-sizing: border-box;
  .list {
    max-height: 600rpx;
    overflow: scroll;
    padding: 48rpx 48rpx 0 48rpx;
  }
  .title {
    padding: 0 48rpx 32rpx 0;
    text-align: center;
    position: relative;
    line-height: 36rpx;
    .close {
      position: absolute;
      right: 48rpx;
      top: 0;
      font-size: 48rpx;
    }
  }
  .f-item {
    padding-bottom: 32rpx;
    margin-bottom: 48rpx;
    border-bottom: 1px solid #e9e9ea;
    .bank-name {
      min-width: 64rpx;
      flex-shrink: 0;
    }
    &:nth-last-child(1) {
      margin-bottom: 0;
      border: none;
      border: 0;
    }
    .type {
      margin-top: 16rpx;
    }
    .icon {
      width: 56rpx;
      height: 56rpx;
      margin-right: 32rpx;
    }
    .radio {
      width: 48rpx;
      height: 48rpx;
    }
    .arrow {
      width: 32rpx;
      height: 32rpx;
    }
  }
  .btns {
    padding: 24rpx 48rpx 0 48rpx;
    margin-top: 28rpx;
    border-top: 2rpx solid #e9e9ea;
    .btn {
      flex: 1;
      height: 88rpx;
      line-height: 88rpx;
      margin: 0;
      &:nth-child(1) {
        margin-right: 22rpx;
      }
    }
  }
}
</style>
